<template>
  <Transition name="fa-widget__fade">
    <div v-if="visible" class="fa-widget-label__wrapper">
      <div v-if="label" class="fa-widget-label" :class="{ 'is-error': error }">{{ label }}</div>
    </div>
  </Transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

/** 控件提示 */
export default defineComponent({
  name: 'FaWidgetLabel',

  props: {
    /** 展示文案 */
    label: {
      type: String,
      required: true
    },

    /** 可见 */
    visible: {
      type: Boolean,
      default: false
    },

    /** 是否错误 */
    error: {
      type: Boolean,
      default: false
    }
  }
})
</script>

<style lang="scss">
$max-width: 300px;

.fa-widget-label {
  display: inline-block;
  box-sizing: border-box;
  margin: auto;
  padding: 3px 6px;
  overflow: hidden;
  color: $color-text-primary;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  cursor: default;
  user-select: none;

  &__wrapper {
    position: absolute;
    top: 100%;
    left: 50%;
    width: $max-width;
    height: 0px;
    margin-top: 8px;
    margin-left: math.div(-$max-width, 2);
    text-align: center;
    pointer-events: none;
  }

  &.is-error {
    color: $color-danger;
    background-color: $color-danger-lightest;
  }
}
</style>
